/**
 * 分成明细列表
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分成明细列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="boxBlock"> 
        <div class="serachTop"> 
              <!-- 搜索筛选 -->
            <el-form :inline="true" :model="formInline" class="user-search"> 
              <el-form-item>
                <el-input
                  size="small"
                  v-model="formInline.userId"
                  placeholder="输入用户ID"
                  type="number"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  size="small"
                  v-model="formInline.agentId"
                  placeholder="输入代理商ID"
                  type="number"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item>
                  <el-select
                      size="small"
                      v-model="formInline.type"
                      placeholder="请选择成本类型"
                    >
                      <el-option
                        v-for="type in typeData"
                        :label="type.value"
                        :value="type.key"
                        :key="type.key"
                      ></el-option>
                    </el-select>
              </el-form-item>

              <el-form-item>
                <el-select
                  size="small"
                  v-model="formInline.feeType"
                  placeholder="请选择操作类型"
                >
                  <el-option
                    v-for="type in feeTypeData"
                    :label="type.value"
                    :value="type.key"
                    :key="type.key"
                  ></el-option>
                </el-select>
              </el-form-item>  
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="search"
                >
                  搜索
                </el-button> 
                <el-button size="small" type="primary" icon="el-icon-download" @click="exportEx()" > 
                    导出
                </el-button>
              </el-form-item>
            </el-form>
        </div> 
  
    <!--列表-->
    <div class="ra_box"> 
      <el-table
        size="small"
        :data="listData"
        highlight-current-row
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 100%" 
      > 
        <el-table-column prop="userId" label="用户ID"> </el-table-column>
        <el-table-column prop="agentId" label="代理ID" show-overflow-tooltip>  </el-table-column>
        <el-table-column prop="type" label="类型" show-overflow-tooltip>
            <template slot-scope="scope"> 
                <!-- 0手续费1充值费 -->  
                  {{ scope.row.type==0?'手续费':'充值费' }}-{{  feeTypeDataArr[scope.row.feeType] }}
                  
            </template>
        </el-table-column>
        <el-table-column
          prop="execRate"
          label="执行费率"
          show-overflow-tooltip
        >
        </el-table-column>
        
        <el-table-column prop="costRate" label="成本费率" show-overflow-tooltip>  </el-table-column>
        <el-table-column prop="computeRate" label="计算费率" show-overflow-tooltip>  </el-table-column>
        <el-table-column prop="amount" label="计算金额" show-overflow-tooltip>  </el-table-column>
        <el-table-column prop="profit" label="待分金额" show-overflow-tooltip></el-table-column>  
        <el-table-column prop="floatRate" label="浮动费率" show-overflow-tooltip></el-table-column>  
        <el-table-column prop="floatAmount" label="浮动金额" show-overflow-tooltip></el-table-column>   

        <!-- <el-table-column
            prop="feeId"
            label="手续费ID"
            show-overflow-tooltip
            width="120"
          >
          
        </el-table-column> -->
 
        <el-table-column
          prop="createAt"
          label="创建时间"
          show-overflow-tooltip
        >
           <template slot-scope="scope">
              {{ timestampToTime(scope.row.createAt, 8 * 60 * 60) }}
            </template>
        </el-table-column>  
        <!-- <el-table-column
          prop="createdAtStart"
          label="开始时间"
          show-overflow-tooltip
        >
            <template slot-scope="scope">
              {{ timestampToTime(scope.row.createdAtStart, 8 * 60 * 60) }}
            </template>
        </el-table-column>
        <el-table-column
          prop="createdAtEnd"
          label="截止时间"
          show-overflow-tooltip
        >
           <template slot-scope="scope">
              {{ timestampToTime(scope.row.createdAtEnd, 8 * 60 * 60) }}
            </template>
        </el-table-column> -->
        
        <el-table-column prop="remark" label="备注" show-overflow-tooltip>
          
        </el-table-column>
        <!-- <el-table-column align="left" label="" width="350">
          <template slot-scope="scope">
            <el-button
               size="mini"   plain
              @click="handleEdit('editForm', scope.row)"
            >
              编辑
            </el-button>
            

          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>
 
 
 
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  timestampToTime,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  req,
  reqJson,
  encrypt,
  decrypt,
  reqtoken,
  service,
  format,
  getUrl,
} from "../../api/axiosFun";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loading: false,
      editFormVisible: false,
      addFormVisible: false,
      addUserVisible: false,
      b: format,
      timestampToTime: timestampToTime,
      formInline: {
        pageNum: 1,
        pageSize: 10,
        name: "",
        userId: "",
      },
      addForm: {
        auth: "",
        coverCharge: "",
        shareAuth: 0,
        name: "",
        open: "",
        recharge: "",
        refund: "",
        remark: "",
        users: [],
      },
      editForm: {},
      // rules表单验证
  
      feeItem: "",
      userIDList: [],
      delIDList: [],
      options: [],
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      userInfo:{},

      
      typeData:[
        {
          key:0,
          value:'手续费'
        },
        {
          key:1,
          value:'充值费'
        }
      ], 
     feeTypeData:[
        {
          key:1,
          value:'开卡手续费'
        },
        {
          key:2,
          value:'充卡手续费'
        },
        {
          key:3,
          value:'交易退款手续费'
        },
        {
          key:4,
          value:'交易手续费(常规卡)'
        },
        {
          key:5,
          value:'交易手续费(共享卡)'
        },
        {
          key:6,
          value:'服务费'
        },
        {
          key:8,
          value:'钱包充值'
        },
        {
          key:9,
          value:'后台扣款'
        },
       
      ], 
      feeTypeDataArr:{
        1:'开卡手续费',
        2:'充卡手续费',

        3:'交易退款手续费',
        4:'交易手续费(常规卡)',
        5:'交易手续费(共享卡)',
        6:'服务费',
        8:'钱包充值',
        9:'后台扣款', 
      }
      

    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  created() {
    this.getdata(this.formInline);
    if(this.$store.state.user){
        this.userInfo = JSON.parse(this.$store.state.user);
    }
  },
  computed: {
    ...mapGetters(["getUser"]), 
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal); 
    },
  }, 
  methods: {
    getdata(parameter) {
      let url = getUrl(parameter);  
      let objectUrl = 'admin' 
      if(this.$store.state.user){
        this.userInfo = JSON.parse(this.$store.state.user);
      } 
   
      if(this.userInfo.userType=='01'){
        objectUrl = 'photon'
      }else{ 
      }  
      service
        .get("/api/"+objectUrl+"/tradeFeeAgentList" + url, {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
 
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    handleEdit(name, row) {
        this.addFormVisible = true;
    },
 
    submitForm(name) {
      this.$refs[name].validate((valid) => {
        if (!valid) return;
        this.loading = true;
        if (name == "addForm") {
          service
            .post("/api/admin/editRateConfig", this.addForm)
            .then((res) => {
              this.loading = false;
              if (res.code == 0) {
                this.$message.success(res.msg);
                this.getdata(this.formInline);
                this.closeDialog("addForm");
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              this.$message.error(spStr(err, "PhotonPay", ""));
            });
        } else {
          service
            .post("/api/admin/editRateConfig", this.editForm)
            .then((res) => {
              this.loading = false;
              if (res.code == 0) {
                this.$message.success(res.msg);
                this.getdata(this.formInline);
                this.closeDialog("editForm");
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              this.$message.error(spStr(err, "PhotonPay", ""));
            });
        }
      });
    },
 
 
    // 关闭编辑、增加弹出框
    closeDialog(name) {
      if (name == "editForm") {
        this.editFormVisible = false;
      } else if (name == "addUser") {
        this.addUserVisible = false;
        this.userIDList = [];
      } else if (name == "addForm") {
        this.addFormVisible = false;
        this.$refs.addForm.resetFields();
      }
    },
 
   
    exportEx() {
      let url = getUrl(this.formInline);  
      let objectUrl = 'admin'
      if(this.$store.state.user){
        this.userInfo = JSON.parse(this.$store.state.user);
      }
      if(this.userInfo.userType=='01'){
        objectUrl = 'photon'
      }else{ 
      } 
      service
        .post("/api/"+objectUrl+"/exportTradeFeeAgentList" + url, {})
        .then((res) => {
          this.loading = false; 
          if (res.code == 0) {
            window.open(
              baseURL + "/common/download?fileName=" + res.msg,
              "_blank"
            );
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err);
        });
    },


 
     
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
/deep/ .el-table .row-expand-cover .cell .el-table__expand-icon {
  display: none;
}
.myForm .el-form-item {
  /* display: inline-block;
  margin-left: 5%; */
}

.el-form .select10 .el-select {
  width: 100%;
}
</style>

 
 